<script setup name="App" lang="ts">
import { Ref, ref } from 'vue';

// !泛型参数规定的是初始值的类型（推荐）
// const count = ref<number>(10)
// 一般情况下可以省略，利用 TS 自身的类型推导
// const count = ref(10)

// !另一种指定 ref 类型的方式
// const count: Ref<number> = ref(10)

// !默认情况下，数组里面的元素推导出来的是 never 类型
// const data = ref([])
// 这样写仅仅在 TS 层面没有报错，但是没有提示的能力
// const data = ref([{ }])
// !可以通过指定一个初始数据，TS 会根据初始数据推导出来你想要的结果
// const data = ref([{ id: 0, name: 'ls', done: false }])

// !【建议】
interface IItem { id: number; name: string; done: boolean }
const data = ref<IItem[]>([])
// const data: Ref<IItem[]> = ref([])

setTimeout(() => {
  data.value = [{
    id: 0,
    name: 'zs',
    done: false
  }, {
    id: 0,
    name: 'zs',
    done: false
  }]
}, 1000)

</script>
<template>
  <ul>
    <li v-for="item in data" :key="item.id">{{item.name}}</li>
  </ul>
</template>
